<template>
  <view class="deco-person-info-bar" :style="[innerStyle]">
    <!-- 对外渠道 -->
    <view v-if="channelType == 'outside'" class="flex items-center flex-1" @click="handleClickUser">
      <image class="user-avatar" :class="{ 'user-avatar--nologin': !login }" :src="userInfo.headImg || useImage('/zuimei-film-oss/1.0.0/images/avatar.png')" mode="aspectFill" />
      <view class="flex flex-col ml-20">
        <template v-if="login">
          <text class="font-32 font-700">{{ userInfo.nickName || userInfo.mobile | encryptMobile }}</text>
          <view v-if="!userInfo.mobile" class="flex items-center font-26 text-666 mt-18" @click.stop="handleAuth">
            <text>绑定手机号</text>
            <zm-icon name="arrow" size="24rpx" color="#9A9A9A" custom-class="ml-10 mt-2"></zm-icon>
          </view>
        </template>
        <text v-else class="font-32 font-700">登录/注册</text>
        <text v-if="!login" class="font-26 text-666 mt-14">登录体验更多观影优惠</text>
      </view>
    </view>
    <!-- 内部渠道 -->
    <view v-else class="flex flex-1 items-center justify-between">
      <view class="flex items-center flex-1" @click="handleClickUser">
        <image v-if="login" class="user-avatar mr-20" :src="userInfo.headImg || useImage('/zuimei-film-oss/1.0.0/images/avatar.png')" mode="aspectFill" />
        <view v-if="login" class="flex flex-col">
          <text class="font-32 font-bold">{{ userInfo.nickName || userInfo.mobile | encryptMobile }}</text>
          <view v-if="!userInfo.mobile" class="flex items-center font-26 text-666 mt-18" @click.stop="handleAuth">
            <text>绑定手机号</text>
            <zm-icon name="arrow" size="24rpx" color="#9A9A9A" custom-class="ml-10 mt-2"></zm-icon>
          </view>
          <!-- 显示至尊/普通icon -->
          <view v-else class="mt-10">
            <image v-if="userInfo.level !== '2'" class="member-equity" :src="useImage('/zuimei-film-oss/1.0.0/icons/normal-member.png')" mode="aspectFill" />
            <image v-else class="member-equity" :src="useImage('/zuimei-film-oss/1.0.0/icons/super-member.png')" mode="aspectFill" />
          </view>
        </view>
        <view v-else class="flex flex-col">
          <text class="font-32 font-700">Hi，欢迎来到{{ baseInfo.priSubject || manifest.name }}</text>
          <text class="font-28 mt-8">登录/注册</text>
        </view>
      </view>
      <view v-if="login" class="relative click-animation" @click="toView({ url: 'pages/person/user-signin/user-signin', login: false })">
        <text :class="[signClass]">{{ isSign ? "已签到" : "签到" }}</text>
        <u-image width="138rpx" height="104rpx" :src="useImage(`/zuimei-film-oss/1.0.0/images/${isSign ? 'unsign' : 'signin'}-bg.png`)"></u-image>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import manifest from "@/manifest.json"
import { mapGetters } from "vuex"
export default {
  name: "deco-person-info-bar",
  mixins: [mixin],
  data() {
    return {
      manifest
    }
  },
  computed: {
    ...mapGetters(["login", "userInfo", "personDeco", "baseInfo", "isSign"]),
    // 渠道类型
    channelType() {
      return this.personDeco?.config?.channelType
    },
    signClass() {
      return this.isSign ? "unsigin-btn" : "signin-btn"
    }
  },
  methods: {
    handleClickUser() {
      uni.$toView({ url: "pages/person/user-profile/user-profile", login: true })
    },
    handleAuth() {
      uni.$emit(`${this.useCurrentRoute()}-login`)
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-person-info-bar {
  display: flex;
  position: relative;
  align-items: center;
  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    &--nologin {
      filter: grayscale(100%);
    }
  }
  .member-equity {
    width: 138rpx;
    height: 36rpx;
  }
  .signin-btn {
    right: 24rpx;
    bottom: 18rpx;
    z-index: 10;
    color: #ffffff;
    font-size: 24rpx;
    position: absolute;
  }
  .unsigin-btn {
    color: #999;
    right: 18rpx;
    bottom: 20rpx;
    z-index: 10;
    font-size: 24rpx;
    position: absolute;
  }
}
</style>
